<template>
	<!-- 城市选择-->
	<view class="city-select">
		<view class="city-select_overview">
			<view class="city-select_overview-title">请选择城市</view>
			<text class="city-select_overview-cancel" @tap="handleCancelChangeCity">
				<image src="/static/index/icon_gb.png" />
			</text>
		</view>

		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="city-select-main" id="city-select-main"
			:scroll-into-view="toView">
			<!-- 预留搜索-->
			<view class="city-serach" v-if="isSearch">
				<view class="city-serach-box">
					<image class="icon" src="@/static/login/ss.png" mode="aspectFit" />
					<input @input="keyInput" :placeholder="placeholder" class="city-serach-input" />
				</view>
			</view>
			<view class="hot-title" v-if="hotCity.length > 0 && !serachCity">热门城市</view>
			<view class="hot-city" v-if="hotCity.length > 0 && !serachCity">
				<template v-for="(item, index) in hotCity">
					<view :key="index" @click="cityTrigger(item, 'hot')" class="hot-item" :class="{
						active: (item.cityName === (cityInfo && cityInfo.name))
					}">{{ item[formatName] }}</view>
				</template>
			</view>
			<!-- 城市列表(搜索前) -->
			<view class="citys" v-if="!serachCity">
				<view class="citys-title-bold">
					<view class="citys-title-bold-province">
						省份
					</view>
					<view class="citys-title-bold-city">
						城市
					</view>
				</view>
				<!-- <view v-for="(city, index) in sortItems" :key="index" v-show="city.isCity" class="citys-row">
					<view class="citys-item-letter" :id="'city-letter-' + (city.name === '#' ? '0' : city.name)">{{ city.name }}</view>
					<view class="citys-item" v-for="(item, inx) in city.citys" :key="inx" @click="cityTrigger(item)">{{ item.cityName }}</view>
				</view> -->
				<!-- 省市区选择 province city area初始省市区设置 show:是否显示  @sureSelectArea：确认事件 @hideShow：隐藏事件-->
				<view>
					<uniCitySelect :province="provinceInfo && provinceInfo.name" :city="cityInfo && cityInfo.name" area="hotCity"
						@changeClick="changeClick" ref="citys"></uniCitySelect>
				</view>
			</view>
			<view class="confirm-btn-wrap">
				<button class="confirm-btn" @click="handleSureChangeCity">确定</button>
			</view>
			<!-- 城市列表(搜索后)  -->
			<view class="citys" v-if="serachCity">
				<view v-for="(item, index) in searchDatas" :key="index" class="citys-row">
					<view class="citys-item" :key="inx" @click="cityTrigger(item)">{{ item.name }}</view>
				</view>
			</view>


		</scroll-view>
		<!-- 城市选择索引-->


	</view>
</template>

<script>
	import citySelect from './citySelect.js';
	import uniCitySelect from "@/components/cc-selectDity/cc-selectDity.vue";
	export default {
		components: {
			uniCitySelect
		},
		props: {
			//查询提示文字
			placeholder: {
				type: String,
				default: '请输入城市名称'
			},
			//传入要排序的名称
			formatName: {
				type: String,
				default: 'cityName'
			},
			//当前定位城市
			activeCity: {
				type: Object,
				default: () => null
			},
			
			cityValue: {
				cityName: {
					type: String,
					default: ''
				},
				cityCode: {
					type: String,
					default: ''
				},
				provinceName: {
					type: String,
					default: ''
				},
				provinceCode: {
					type: String,
					default: ''
				},
			},
			//热门城市
			hotCity: {
				type: Array,
				default: () => []
			},
			//城市数据
			obtainCitys: {
				type: Array,
				default: () => []
			},
			//是否有搜索
			isSearch: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				toView: 'city-letter-Find', //锚链接 初始值
				scrollTop: 0, //scroll-view 滑动的距离
				cityindexs: [], // 城市索引
				activeCityIndex: '', // 当前所在的城市索引
				handleCity: [], // 处理后的城市数据
				serachCity: '', // 搜索的城市
				cityData: [],
				xx: '',
				value:[0],
				provinceInfo: {
					code: this.cityValue.provinceCode,
					name: this.cityValue.provinceName,
				},
				cityInfo: {
					code: this.cityValue.cityCode,
					name: this.cityValue.cityName,
				},
				areaAllInfo: {
					provinceInfo: {
						code: '',
						name: '',
					},
					cityInfo: {
						code: '',
						name: '',
					},
					areaAllCode: '',
				}
			};
		},
		computed: {
			/**
			 * @desc 城市列表排序
			 * @return  Array
			 */
			sortItems() {
				for (let index = 0; index < this.handleCity.length; index++) {
					if (this.handleCity[index].isCity) {
						let cityArr = this.handleCity[index].citys;
						cityArr = cityArr.sort(function(a, b) {
							var value1 = a.unicode;
							var value2 = b.unicode;
							return value1 - value2;
						});
					}
				}
				return this.handleCity;
			},
			/**
			 * @desc 搜索后的城市列表
			 * @return Array
			 */
			searchDatas() {
				var searchData = [];
				for (let i = 0; i < this.cityData.length; i++) {
					if (this.cityData[i][this.formatName].indexOf(this.serachCity) !== -1) {
						searchData.push({
							oldData: this.cityData[i],
							name: this.cityData[i][this.formatName]
						});
					}
				}
				return searchData;
			}
		},
		created() {
			// 初始化城市数据
			this.cityData = this.obtainCitys;
			this.initializationCity();
			this.buildCityindexs();
		},
		watch: {
			obtainCitys(newData) {
				this.updateCitys(newData);
			}
		},
		methods: {
			openPicker() {
				console.log('执行打开地址选择器')
				this.show = true
			},

			changeClick(value, value2, area, areaCode) {


				this.$emit('ww', value2);



				this.province = value;
				this.city = value2;
				/** 省市编码code保存 **/
				this.areaAllInfo = {
					provinceInfo: {
						name: value,
						code: areaCode.slice(0, 2),
					},
					cityInfo: {
						name: value2,
						code: areaCode.slice(0, 4),
					},
					areaAllCode: areaCode,
				};

			},
			handleSureChangeCity() {
				console.log(this.areaAllInfo.provinceInfo,'this.areaAllInfo.provinceInfo;')

				this.provinceInfo = this.areaAllInfo.provinceInfo;
				this.cityInfo = this.areaAllInfo.cityInfo;
				this.cityTrigger({
					cityCode: this.areaAllInfo.cityInfo.code,
					cityName: this.areaAllInfo.cityInfo.name,
				});
			},
			handleCancelChangeCity() {
				// 传值到父组件
				this.$emit('onClose');
			},
			//选中省市区
			onsetCity(e) {
				let data = e.detail.target.dataset;
				let address = data.province + data.city
				this.show = false
				this.addressData.address = address
			},
			/**
			 * @desc 初始化
			 */
			updateCitys(data) {
				if (data && data.length) {
					this.cityData = data;
					this.initializationCity();
					this.buildCityindexs();
				}
			},
			/**
			 * @desc 监听输入框的值
			 */
			keyInput(event) {
				this.serachCity = event.detail.value;
			},
			/**
			 * @desc 初始化城市数据
			 * @return undefind
			 */
			initializationCity() {
				this.handleCity = [];
				const cityLetterArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q',
					'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '#'
				];
				for (let index = 0; index < cityLetterArr.length; index++) {
					this.handleCity.push({
						name: cityLetterArr[index],
						isCity: false, // 用于区分是否含有当前字母开头的城市
						citys: [], // 存放城市首字母含是此字母的数组
						forName: 'city-letter-' + (cityLetterArr[index] == '#' ? '0' : cityLetterArr[
							index]) //label的绑定
					});
				}
			},
			/**
			 * @desc 得到城市的首字母
			 * @param str String
			 */
			getLetter(str) {
				return citySelect.getFirstLetter(str[0]);
			},
			/**
			 * @desc 构建城市索引
			 * @return undefind
			 */
			buildCityindexs() {
				this.cityindexs = [];
				for (let i = 0; i < this.cityData.length; i++) {
					// 获取首字母
					const cityLetter = this.getLetter(this.cityData[i][this.formatName]).firstletter;
					// 获取当前城市首字母的unicode，用作后续排序
					const unicode = this.getLetter(this.cityData[i][this.formatName]).unicode;

					const index = this.cityIndexPosition(cityLetter);
					if (this.cityindexs.indexOf(cityLetter) === -1) {
						this.handleCity[index].isCity = true;
						this.cityindexs.push(cityLetter);
					}

					this.handleCity[index].citys.push({
						cityName: this.cityData[i][this.formatName],
						unicode: unicode,
						oldData: this.cityData[i]
					});
				}
			},
			/**
			 * @desc 滑动到城市索引所在的地方
			 * @param id String 城市索引
			 */
			cityindex(id) {
				this.toView = id;
			},
			/**
			 * @desc 获取城市首字母的unicode
			 * @param letter String 城市索引
			 */
			cityIndexPosition(letter) {
				if (!letter) {
					return '';
				}
				const ACode = 65;
				return letter === '#' ? 26 : letter.charCodeAt(0) - ACode;
			},
			/** @desc 城市列表点击事件
			 *  @param Object
			 */
			cityTrigger(item) {
				// 传值到父组件
				this.$emit('cityClick', item.oldData ? item.oldData : item);
			}
		}
	};
</script>

<style lang="scss">
	//宽度转换vw
	@function vww($number) {
		@return ($number / 375) * 750+rpx;
	}

	view {
		box-sizing: border-box;
	}


	.city-select_view_btns {
		background-color: #fff;
		border-bottom: 1px solid #eeeeee;
		font-size: 30upx;
		padding: 18upx 0upx;
		display: flex;
		justify-content: space-between;
	}

	.city-select_view_btns>text {
		display: inline-block;
		word-spacing: 4upx;
		letter-spacing: 4upx;
	}

	.city-select_view_btn_cancle {
		color: #939393;
		padding-right: 20upx;
		padding-left: 25upx;
	}

	.city-select_view_btn_sure {
		float: right;
		padding-left: 20upx;
		padding-right: 25upx;
	}



	.city-serach {
		padding: 20rpx;
		margin-top: 40rpx;
	}

	.city-serach-input {
		flex: 1;
		height: 100%;
		font-size: 28rpx;
		border: none;
		background: #F1F8FF;
		outline: none;
		padding-left: 12rpx;
		border-radius: 94rpx 94rpx 94rpx 94rpx;
	}

	.city-serach-input::placeholder {
		font-family: PingFang SC, PingFang SC;
		// font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.city-serach-box {
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		background: #F1F8FF;
		position: relative;
		border-radius: 94rpx;
		height: 70rpx;
		width: 690rpx;
		margin-left: 14rpx;

		.icon {
			width: 28rpx;
			height: 28rpx;
		}
	}

	.select-city {
		color: #4a4a4a;
		padding: 32rpx 558rpx 0rpx 32rpx
	}

	.city-serach {
		width: 100%;
		color: #4a4a4a;
		padding: 0 vww(10);

		&-input {
			height: 70rpx;
			border-radius: 94rpx 94rpx 94rpx 94rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
	}

	.city-select-main {
		position: relative;
		// overflow: scroll;
		// -webkit-overflow-scrolling: touch;
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		// overflow-y: auto;
	}

	.city-select {
		position: relative;
		width: 100vw;
		height: 100vh;
		background: #fff;
		.city-select_overview {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx 32rpx 24rpx 32rpx;
			.city-select_overview-title {
				font-size: 32rpx;
				color: #333;
			}
			.city-select_overview-cancel {
				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		// 热门城市
		.hot-title {
			padding-left: vww(23);
			width: 100vw;
			font-size: 14px;
			line-height: vww(40);
			color: #9b9b9b;
		}

		// .hot-city {
		// 	padding-left: vww(23);
		// 	padding-right: vww(20);
		// 	overflow: hidden;
		// 	width: 100vw;

		// 	.hot-item {
		// 		background: #F1F8FF;
		// 		border-radius: 94rpx 94rpx 94rpx 94rpx;
		// 		float: left;
		// 		padding: 0 vww(5);
		// 		margin-right: vww(16);
		// 		margin-bottom: vww(6);
		// 		overflow: hidden;
		// 		width: vww(100);
		// 		height: vww(31);
		// 		font-size: 14px;
		// 		text-align: center;
		// 		display: -webkit-box;
		// 		-webkit-box-orient: vertical;
		// 		-webkit-line-clamp: 1;
		// 		line-height: vww(31);
		// 		color: #999;

		// 		&.active {
		// 			border: solid #3C76F2 1px;
		// 			background-color: #fff;
		// 			color: #3C76F2;
		// 		}

		// 		&:nth-child(3n) {
		// 			margin-right: 0;
		// 		}
		// 	}

		// 	.hot-hidden {
		// 		display: none;
		// 		margin-right: 0;
		// 	}
		// }
		.hot-city {
		  padding-left: 30rpx;
		  padding-right: 30rpx;
		  overflow: hidden;
		  width: 100vw;
		  display: flex;
		  flex-wrap: wrap;
		  box-sizing: border-box;
		
		  .hot-item {
		    width: 22%;
		    margin: 0 4% 20rpx 0;
		    background: #F1F8FF;
		    border-radius: 94rpx;
		    font-size: 26rpx;
		    text-align: center;
		    line-height: 60rpx;
		    height: 60rpx;
		    color: #999;
		    box-sizing: border-box;
		
		    &.active {
		      border: 1px solid #3C76F2;
		      background-color: #fff;
		      color: #3C76F2;
		    }
		
		    // 每行第4个不加右 margin
		    &:nth-child(4n) {
		      margin-right: 0;
		    }
		  }
		
		  .hot-hidden {
		    display: none;
		    margin-right: 0;
		  }
		}


		.confirm-btn-wrap {
			padding: 60rpx 130rpx;
			background-color: #fff;
			display: flex;
			justify-content: center;
			.confirm-btn {
				width: 410rpx;
				height: 84rpx;
				background: linear-gradient(to bottom right, #6CB0F2, #3C75F2 );
				border-radius: 42rpx;
				border: none;
				color: #fff;
			}
		}
		.citys {
			.citys-title-bold {
				padding: 40rpx 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.citys-title-bold-province, .citys-title-bold-city {
					flex: 1;
					text-align: center;
					font-size: 32rpx;
				}
			}
			.citys-row {
				padding-left: vww(18);
				width: 100%;
				font-size: 14px;
				background: #fff;

				.citys-item-letter {
					margin-left: vww(-18);
					padding-left: vww(18);
					margin-top: -1px;
					width: 100vw;
					line-height: vww(30);
					color: #9b9b9b;
					border-top: none;
				}

				.citys-item {
					width: 100%;
					line-height: vww(50);
					color: #4a4a4a;
					border-bottom: 1px solid #ebebf0;

					&:last-child {
						border: none;
					}
				}
			}
		}

		.city-indexs-view {
			position: absolute;
			right: 0;
			top: 0;
			z-index: 999;
			display: flex;
			width: vww(20);
			height: 100%;
			text-align: center;

			.city-indexs {
				width: vww(20);
				text-align: center;
				vertical-align: middle;
				align-self: center;

				.city-indexs-text {
					margin-bottom: vww(10);
					width: vww(20);
					font-size: 12px;
					color: #4d8cfd;

					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}
</style>